<template>
  <!-- <div class="admin_left"> -->
    <el-col>
      <el-menu
        default-active="/admin/home"
        class="el-menu-vertical-demo"
        background-color="#22293e"
        text-color="#c7c7c7"
        active-text-color="#5272ff"
        :collapse="this.parent.collapse"
        router
        unique-opened>  <!-- 只保持一个子菜单展出 -->
          <h2>{{$t('lang.activity_oms')}}</h2>
          <el-menu-item index="/admin/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">{{$t('lang.home')}}</span>
          </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-apple"></i>
            <span>{{$t('lang.user_management')}}</span>
          </template>
            <el-menu-item index="/admin/ptyh">{{$t('lang.user_common')}}</el-menu-item>
            <el-menu-item index="/admin/zbfdw">{{$t('lang.unit_join')}}</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <span>{{$t('lang._active_management')}}</span>
          </template>
          <el-menu-item index="/admin/hdgl">{{$t('lang._active_management')}}</el-menu-item>
          <el-menu-item index="/admin/hdlx">{{$t('lang.active_types')}}</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-copy-document"></i>
            <span>{{$t('lang.advertising_management')}}</span>
          </template>
          <el-menu-item index="/admin/pcsygg">{{$t('lang.pc_advertising')}}</el-menu-item>
          <el-menu-item index="/admin/ydsygg">{{$t('lang.move_advertising')}}</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>{{$t('lang.admin_management')}}</span>
          </template>
          <el-menu-item index="/admin/jsgl">{{$t('lang.role_management')}}</el-menu-item>
          <el-menu-item index="/admin/glyyh">{{$t('lang.administrators')}}</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>{{$t('lang.system_management')}}</span>
          </template>
          <el-menu-item index="/admin/gywm">{{$t('lang.about_us')}}</el-menu-item>
          <el-menu-item index="/admin/yjfk">{{$t('lang.suggestion_feedback')}}</el-menu-item>
          <el-menu-item index="/admin/bzzx">{{$t('lang.help_center')}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  <!-- </div> -->
</template>

<script>
  export default{
    props:["parent"]
  }
</script>

<style>

  .el-col{
    height: 100%;
   }
  .el-menu{
    height: 100%;
  }
  h2{
    background-color: #5272ff;
    padding: 8px;
    text-align: center;
    margin: 0;
    color: white;
    font-weight: inherit;
    word-wrap:break-word;  /* 强行换行 */
  }

  .el-menu>.el-menu-item.is-active {
    background-color: #181d2c !important;
  }
  .el-submenu .el-menu-item.is-active{
    background-color: #5272ff !important;
    color: white !important;
  }
  .el-submenu .el-menu-item{
    background-color: #181d2c !important;
  }
  .el-menu-item:hover,
  .el-submenu :hover i,
  .el-submenu :hover span{
    color: #FFFFFF !important;
  }
  .el-submenu__title:hover{
    background-color: rgba(0,0,0,0) !important;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 265px;
  }
  .el-header,.el-main{
    padding: 0;

  }
  .el-container{
    height: 100%;
    width: 100%;
  }
</style>
